<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<#include "/common/include.ftl">
<style>
  body {
    padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
  }
</style>
</head>
<body>

	<div class="navbar navbar-inverse navbar-fixed-top">
	    <div class="navbar-inner">
	    	<div class="container">
			      <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
		            <span class="icon-bar"></span>
		            <span class="icon-bar"></span>
		            <span class="icon-bar"></span>
		          </button>
			    <a class="brand" href="#">Project Name</a>
			    <ul class="nav">
				    <li class="active"><a href="#">About</a></li>
				    <li><a href="#">Coursour</a></li>
				    <li><a href="#">About</a></li>
				    <li class="dropdown">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown">
						Account
						<b class="caret"></b>
						</a>
						<ul class="dropdown-menu">
							<li><a tabindex="-1" href="#">Action</a></li>
							<li><a tabindex="-1" href="#">Another action</a></li>
							<li><a tabindex="-1" href="#">Something else here</a></li>
							<li class="divider"></li>
							<li class="dropdown-submenu">
								<a tabindex="-1" href="#">Separated link</a>
								<ul class="dropdown-menu">
									<li><a tabindex="-1" href="#">Action</a></li>
									<li><a tabindex="-1" href="#">Another action</a></li>
								</ul>
							</li>
						</ul>
					</li>
			    </ul>
			     <form class="navbar-search pull-right">
			    	<input type="text"  placeholder="Search" data-source="[&quot;Alabama&quot;,&quot;Alaska&quot;,&quot;Arizona&quot;,&quot;Arkansas&quot;,&quot;California&quot;,&quot;Colorado&quot;,&quot;Connecticut&quot;,&quot;Delaware&quot;,&quot;Florida&quot;,&quot;Georgia&quot;,&quot;Hawaii&quot;,&quot;Idaho&quot;,&quot;Illinois&quot;,&quot;Indiana&quot;,&quot;Iowa&quot;,&quot;Kansas&quot;,&quot;Kentucky&quot;,&quot;Louisiana&quot;,&quot;Maine&quot;,&quot;Maryland&quot;,&quot;Massachusetts&quot;,&quot;Michigan&quot;,&quot;Minnesota&quot;,&quot;Mississippi&quot;,&quot;Missouri&quot;,&quot;Montana&quot;,&quot;Nebraska&quot;,&quot;Nevada&quot;,&quot;New Hampshire&quot;,&quot;New Jersey&quot;,&quot;New Mexico&quot;,&quot;New York&quot;,&quot;North Dakota&quot;,&quot;North Carolina&quot;,&quot;Ohio&quot;,&quot;Oklahoma&quot;,&quot;Oregon&quot;,&quot;Pennsylvania&quot;,&quot;Rhode Island&quot;,&quot;South Carolina&quot;,&quot;South Dakota&quot;,&quot;Tennessee&quot;,&quot;Texas&quot;,&quot;Utah&quot;,&quot;Vermont&quot;,&quot;Virginia&quot;,&quot;Washington&quot;,&quot;West Virginia&quot;,&quot;Wisconsin&quot;,&quot;Wyoming&quot;]" data-items="4" data-provide="typeahead" style="margin: 0 auto;" class="search-query">
			    </form>
			</div>
	    </div>
    </div>
	<#--<div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="brand" href="#">Project name</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
              <li>
              	<a href="#about" data-toggle="dropdown">About</a>
	              	<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
						<li><a tabindex="-1" href="#">Action</a></li>
						<li><a tabindex="-1" href="#">Another action</a></li>
						<li><a tabindex="-1" href="#">Something else here</a></li>
						<li class="divider"></li>
						<li><a tabindex="-1" href="#">Separated link</a></li>
					</ul>
              </li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>-->


    <div class="container">

     <div class="page-header">
	  <h1>Example page header <small>Subtext for header</small></h1>
	</div>


	<div class="row-fluid ">
	  <div class="span3">
	  	<blockquote>
		  <p><strong> Monetary Value</strong></p>
	  	  <h4 class="text-success">$2312.12</h4>
	  	  <small>2013-08-21</small>
		</blockquote>
		<blockquote>
	  	  <h4 class="text-error">$122.12</h4>

		<div class="progress progress-danger">
		  <div class="bar" style="width: 60%;"></div>
		</div>
		</blockquote>
	  </div>
	  <div class="span9">
	  	<div class="row-fluid">
			<div class="span5" style="">
				<p class="text-center"><canvas id="canvas" height="250" width="250"></canvas></p>
			</div>
			<div class="span7" style="">
			 	  <p><i class="icon-briefcase"></i><strong> Monetary Value</strong></p>
			      <p class="muted"><strong>rendered as bold text</strong></p>
				  <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
				  <p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
				  <p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
				  <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>

				  <abbr title="attribute">attr</abbr>

				  <a href="mailto:#">first.last@example.com</a>

			</div>
	  	</div>
	  </div>
	</div>

	<div class="page-header"></div>
  	<div class="row-fluid">
		<div class="span4" style="">
			<p><i class="icon-briefcase"></i><strong> Monetary Value</strong></p>
			      <p class="muted"><strong>rendered as bold text</strong></p>
				  <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
				  <p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
				  <p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
				  <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>

				  <abbr title="attribute">attr</abbr>

				  <a href="mailto:#">first.last@example.com</a>
		</div>
		<div class="span8" style="">
			<p class="text-center"><canvas id="canvas_line" height="250" width="750"></canvas></p>
		</div>
	</div>

    </div> <!-- /container -->

    <script>

		var pieData = [
				{
					value: 30,
					color:"#F38630"
				},
				{
					value : 50,
					color : "#E0E4CC"
				},
				{
					value : 100,
					color : "#69D2E7"
				}

			];

	var myPie = new Chart(document.getElementById("canvas").getContext("2d")).Pie(pieData);


	//-line
	var lineChartData = {
			labels : ["January","February","March","April","May","June","July"],
			datasets : [
				{
					fillColor : "rgba(220,220,220,0.5)",
					strokeColor : "rgba(220,220,220,1)",
					pointColor : "rgba(220,220,220,1)",
					pointStrokeColor : "#fff",
					data : [65,59,90,81,56,55,40]
				},
				{
					fillColor : "rgba(151,187,205,0.5)",
					strokeColor : "rgba(151,187,205,1)",
					pointColor : "rgba(151,187,205,1)",
					pointStrokeColor : "#fff",
					data : [28,48,40,19,96,27,100]
				}
			]

		}

	var myLine = new Chart(document.getElementById("canvas_line").getContext("2d")).Line(lineChartData);

	</script>

</body>
</html>